<template>
    <div class="main">
        <div class="container">
            <!-- <aside > -->
                
            <!-- </aside> -->
            <div :class="isCollapse?'left collapse':'left'">
                 <sidebar  ref="sidebarRef" />
            </div>
            <div class="right">
                <heade  @getIsCollapse="getIsCollapse" :testVal="testVal"/>
                <div>
                    <router-view></router-view>
                </div>
            </div>
            
            
        </div>
    </div>
</template>
<script setup>
/*
setup语法糖：
    只需要在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，setup函数也不需要，
    甚至export default都不用写了，不仅是数据，计算属性和方法，甚至是自定义指令也可以在我们的template中自动获得。
*/
import {ref,reactive} from 'vue'
import sidebar from '@/components/sidebar.vue'
import heade from '@/components/heade.vue'
const isCollapse=ref(false)
const testVal=ref('eeeee')

//父组件通过ref访问子组件
/*
defineExpose:
    众所周知，当子组件使用setup后，父组件就不能像vue2那样直接就可以访问子组件内的属性和方法。
    这个时候就需要在子组件内使用defineExpose宏函数来指定想要暴露出去的属性和方法
*/
const sidebarRef=ref(null)
const getIsCollapse=(val)=>{
    console.log('改变的collapse',val)
    console.log('子组件的实例方法',sidebarRef.value)
    sidebarRef.value.isCollapse=val.value;
    isCollapse.value=val.value;
}
</script>
<style lang="less" scoped>

.header{
    width:100%;
    height:80px;
}
.main{
    .container{
        display: flex;
         .left{
            width:200px;
            height:100%;
        }
        .collapse{
            width: 64px !important;
            transition: 0.3s;
        }
        .right{
            flex:1,
        }
    }
   
    // section{
    //     flex:1; //自适应布局
    // }
}
</style>